<template>
  <a-layout class="home">
    <sidebar></sidebar>
    <a-layout>
      <!-- 顶部 -->
      <a-layout-header class="header">
        <div class="logo" />
        <!-- 下拉菜单 -->
        <div style="float: right">
          <a-dropdown>
            <a class="ant-dropdown-link" @click.prevent>
              Hover me
              <DownOutlined />
            </a>
            <template #overlay>
              <a-menu>
                <a-menu-item>
                  <a href="javascript:;">登录</a>
                </a-menu-item>
                <a-menu-item>
                  <a href="javascript:;">退出</a>
                </a-menu-item>
                <a-menu-item>
                  <a href="javascript:;">设置</a>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
        <a-menu
          theme="dark"
          mode="horizontal"
          v-model:selectedKeys="selectedKeys1"
          :style="{ lineHeight: '64px' }"
        >
          <a-menu-item key="1"
            ><router-link to="/userlist">用户列表</router-link></a-menu-item
          >
          <a-menu-item key="2"
            ><router-link to="/studentmanager"
              >学生管理</router-link
            ></a-menu-item
          >
          <a-menu-item key="3"
            ><router-link to="/teachermanager"
              >教师管理</router-link
            ></a-menu-item
          >
          <a-menu-item key="4"
            ><router-link to="/orderlist">订单列表</router-link></a-menu-item
          >
        </a-menu>
      </a-layout-header>
      <breadcrumb></breadcrumb>
      <a-layout-content
        :style="{
          margin: '10px 16px',
          padding: '0px',
          background: '#fff',
          minHeight: '300px',
        }"
      >
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </a-layout-content>
      <a-layout-footer style="textalign: center">
        &copy;2019 Demo created by Leif
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script>
import Breadcrumb from "./Breadcrumb";
import Sidebar from "./Sidebar.vue";
import { DownOutlined } from "@ant-design/icons-vue";
export default {
  name: "Home",
  data() {
    return {};
  },
  components: {
    Breadcrumb,
    Sidebar,
    DownOutlined,
  },
};
</script>

<style scoped>
</style>
